<template>
  <vxe-column
    title="操作"
    :width="operationBtnsConfig?.width ?? 200"
    fixed="right"
  >
    <template #default="{ row, rowIndex, columnIndex }">
      <view v-show="!isMatchRowInlineEditable(row, rowIndex)">
        <template v-for="btnConfig in allBtnsConfig" :key="btnConfig.key">
          <GdButton
            v-if="btnConfig.isShow"
            :type="btnConfig.componentAttr.type"
            :size="btnConfig.componentAttr.size"
            text
            @click.stop="
              btnConfig.onClick({
                rowIdx: rowIndex,
                colIdx: columnIndex,
                metaKey: btnConfig.key,
                metaItem: btnConfig,
                metaItemList: tableColMetaList,
                rowData: row,
                formData: null,
                tableBodyData: tableBodyData,
                containerAttr: btnConfig.containerAttr,
              })
            "
            :icon="btnConfig.componentAttr.icon"
            :key="btnConfig.key"
          >
            {{ btnConfig.label }}
          </GdButton>
        </template>
      </view>
      <view v-show="isMatchRowInlineEditable(row, rowIndex)">
        <GdButton
          type="primary"
          text
          @click.stop="
            onClick({
              rowIdx: rowIndex,
              colIdx: columnIndex,
              metaKey: 'buildInContainerSubmitBtn',
              metaItem: {},
              metaItemList: tableColMetaList,
              rowData: row,
              formData: null,
              tableBodyData: tableBodyData,
              containerAttr: {},
            })
          "
          >保存</GdButton
        >
        <GdButton
          type="warning"
          text
          @click.stop="
            onClick({
              rowIdx: rowIndex,
              colIdx: columnIndex,
              metaKey: 'buildInContainerCancelBtn',
              metaItem: {},
              metaItemList: tableColMetaList,
              rowData: row,
              formData: null,
              tableBodyData: tableBodyData,
              containerAttr: {},
            })
          "
          >取消</GdButton
        >
      </view>
    </template>
  </vxe-column>
</template>
<script>
export default {
  inheritAttrs: false,
};
</script>
<script setup>
import { toRef, computed, inject } from "vue";
import { useComputedMergeAllBtnsConfig } from "@gd-accbuild-ui/hooks/useComputedMergeAllBtnsConfig";
import GdButton from "@gd-accbuild-ui/gd-ui/gd-button/gd-button.vue";
const props = defineProps({
  tableCommonAttr: {
    type: Object,
    default: () => ({}),
  },
  tableColMetaList: {
    type: Array,
    default: () => [],
  },
  tableBodyData: {
    type: Array,
    default: () => [],
  },
  operationBtnsConfig: {
    type: Object,
  },
  isTreeTable: {
    type: Boolean,
  },
  editConfig: {
    type: Object,
  },
  cellForceMetaConfigMapping: {
    type: Object,
  },
});

const emits = defineEmits(["do-operation"]);
const onClick = (params) => {
  emits("do-operation", { eventFrom: "tableRow", ...params });
};

const buildInBtnsDefaultConfig = {
  buildInAddChildIntoCurBtn: {
    key: "buildInAddChildIntoCurBtn",
    label: "添加子节点",
    //isShow: true,
    onClick,
    componentAttr: {
      type: "primary",
      text: true,
      icon: "",
    },
    containerAttr: {
      containerStyle: "Dialog",
      //operationType: "Add",
    },
  },
  buildInEditBtn: {
    key: "buildInEditBtn",
    label: "编辑",
    isShow: true,
    onClick,
    componentAttr: {
      type: "primary",
      text: true,
      icon: "",
    },
    containerAttr: {
      containerStyle: "Dialog",
      //operationType: "Edit",
    },
  },
  buildInRowDeleteBtn: {
    key: "buildInRowDeleteBtn",
    label: "删除",
    isShow: false,
    onClick: onClick,
    componentAttr: {
      type: "warning",
      icon: {
        site: "suffix",
        name: "delete",
      },
      size: "default",
    },
    containerAttr: {
      containerStyle: "Tip",
      tipMesssage: "是否执行此操作!",
      buttons: [
        {
          key: "buildInContainerSubmitBtn",
          label: "执行",
        },
      ],
    },
  },
  buildInDetailBtn: {
    key: "buildInDetailBtn",
    label: "详情",
    isShow: true,
    onClick,
    componentAttr: {
      type: "primary",
      text: true,
      icon: "",
    },
    containerAttr: {
      containerStyle: "Dialog", //TODO:FIXME: 改为 _target 或 _tab
    },
  },
};
const allBtnsConfig = useComputedMergeAllBtnsConfig(
  toRef(props, "operationBtnsConfig"),
  { buildInBtnsDefaultConfig },
  toRef(props, "isTreeTable")
);

defineExpose({
  allBtnsConfig: allBtnsConfig,
});
////////////////////////////////////
/* 行内编辑按钮 */
const cellForceMetaConfigMappingKeys = computed(() => {
  return Object.keys(props.cellForceMetaConfigMapping);
});
const isMatchRowInlineEditable = (row, rowIndex) => {
  if (props.isTreeTable) {
    return false;
  }
  const cellForceMetaConfigKey_prefix = `${props.tableBodyData[rowIndex]["id"]};`;
  return cellForceMetaConfigMappingKeys.value.some(
    (el) =>
      typeof el === "string" && el.startsWith(cellForceMetaConfigKey_prefix)
  );
};
</script>
<style></style>
